<template>
<div>
    <el-upload
        class="upload-demo"
        :action="objData.host"
        :before-upload="ossPolicy"
        :data="objData"
        list-type="picture">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
  <el-upload
         class="avatar-uploader"
         :action="objData.host"
         :show-file-list="false"
         :data="objData"
         :before-upload="OSSPolicy">
       <img v-if="imageUrl" :src="imageUrl" class="avatar">
       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</div>
</template>

<script>
export default {
    data() {
      return {
          objdata:{
              OSSAccessKeyId:'',
              policy:'',
              Signature:'',
              key:'',
              host:'',
              dir:''
            },

        objData:{
            OSSAccessKeyId:'',
            policy:'',
            Signature:'',
            key:'',
            host:'',
            dir:''
        }
      };
    },
    methods: {
        ossPolicy(file){
            //在上传前进行服务器签名
            return new Promise((resolve,reject)=>{
                //请求后端
                this.$http.get('/policy').then(res=>{
                    this.objData.OSSAccessKeyId = res.data.data.accessid
                    this.objData.policy = res.data.data.policy
                    this.objData.Signature = res.data.data.signature
                    this.objData.dir = res.data.data.dir
                    this.objData.host = res.data.data.host
                    this.objData.key = res.data.data.dir+'${filename}';
                    // let url = `${this.dataObj.host}/${this.dataObj.dir}/${file.name}`;
                    // console.log(url);
                    resolve(true) //继续上传
                })
                .catch(function(error){
                    console.log(error);
                    reject(false) //停止上传
                })
            })
        },
          OSSPolicy(file){
           return new Promise((resolve,reject)=>{
              this.$http.get('/policy')
              .then(res=>{
                // this.objdata.OSSAccessKeyId=res.data.data.accessid
                // this.objdata.policy=res.data.data.policy
                // this.objdata.Signature=res.data.data.signature
                // this.objdata.key=res.data.data.dir+"${filename}"
                // this.objdata.host=res.data.data.host
                // this.objdata.dir=res.data.data.dir
                // resolve(true)
                this.objData.OSSAccessKeyId = res.data.data.accessid
                this.objData.policy = res.data.data.policy
                this.objData.Signature = res.data.data.signature
                this.objData.dir = res.data.data.dir
                this.objData.host = res.data.data.host
                this.objData.key = res.data.data.dir+'${filename}';
                resolve(true) //继续上传
              })
              .catch(function (error){
                 console.log(error)
                 reject(false)
              })
           })

           
      }
    }
}
</script>

<style>

</style>